<#macro page>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CompFlow Engine Panel</title>
    <meta name="description" content="">
        
    <link href="/css/joint.min.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
</head>

<body>

<div id="wrap">
<div class="header">
	<nav class="navbar navbar-default" role="navigation">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand" href="/">CompFlow</a>
	    </div>
	
	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
	      <ul class="nav navbar-nav">
	        <li class="job-menu"><a href="/job">My Jobs</a></li>
	        <#if person?? && person.isAdmin><li class="interface-menu"><a href="/interface">Engine Interfaces</a></li></#if>
	      </ul>
	      
	      <ul class="nav navbar-nav">
	       <#if person??>
	       <#if person.interfaces?size != 0>
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tasks<b class="caret"></b></a>
	          <ul class="dropdown-menu">
	          	<#list person.interfaces as i>
	          	<li class="dd-interface"><a href="/${i.shortUri}">${i.label?html}</a></li>
	          	</#list>
	          </ul>
	        </li>
	       </#if>
	       </#if>
	      </ul>
	      
	      <ul class="nav navbar-nav navbar-right">
	       <#if person??>
	        <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown">${person.firstName} ${person.lastName}<b class="caret"></b></a>
	          <ul class="dropdown-menu">
	          	<li class="dd-createjob"><a href="/job/create">Create Job</a></li>
	            <li class="divider"></li>
	            <li class="dd-profile"><a href="/profile">Profile</a></li>
	            <li class="divider"></li>
	            <li><a href="#" id="btnLogout">Sign out</a></li>
	          </ul>
	        </li>
	       <#else>
	        <li><a href="/_login">Sign in</a></li>
	        <li><a href="/register">Register</a></li>
	       </#if>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container-fluid -->
	</nav>
</div>

<script src="/lib/joint.min.js"></script>

<div class="container">
	<div id="progress" class="overlay" style="display: none;"><div class="progress progress-striped active">
	  <div class="progress-bar"  role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div>
	</div></div>
	<div class="alert alert-error alert-danger" role="alert" style="display: none;"></div>
	<div class="alert alert-success" role="alert" style="display: none;"></div>
<#nested>
</div>
</div>

<div id="footer">
  <div class="container">
    <p class="text-muted">CompFlow Engine v1.0a <span class="pull-right">2014</span></p>
  </div>
</div>

<script>
$(document).ready(function() {
	$("#btnLogout").click(function (event) {
	    event.preventDefault(); // Don't let this button submit the form
	   	    
		AccountManager.logout(function() {
			window.location.href = '/';
		});
	});
});
</script>

<script src="/lib/md5.js"></script>
<script src="/lib/bootstrap.min.js"></script>
<script src="/lib/jquery.bootstrap.wizard.js"></script>
<script src="/lib/jquery.cookie.js"></script>
<script src="/js/utils.js"></script>

</body>
</html>
</#macro>